<template>
  <VPage>
    <div class="trial-calc flex h-[100%]">
      <div class="flex flex-[0_0_528px] p-[8px] h-[100%] overflow-hidden pt-[0]">
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="运费试算" name="freight">
            <Freight @tableData="handleTableData" :options="optionsData" @selling="activeName = 'selling'" />
          </el-tab-pane>
          <!-- <el-tab-pane label="售价试算" name="selling">
            <Selling @tableData="handleTableData"/>
          </el-tab-pane> -->
        </el-tabs>
      </div>
      <div
        class="flex flex-[1_1_auto] px-[8px] pt-[16px] overflow-hidden h-[100%] border-l-[1px] border-l-[var(--base-link-color)]"
      >
        <FreightTable
          v-show="activeName === 'freight'"
          :data="tableData.freight"
        />
        <SellingTable v-show="activeName === 'selling'" :data="tableData.selling"/>
      </div>
    </div>
  </VPage>
</template>
<script setup>
import { ref } from 'vue'

import Freight from './Freight/index.vue'
import FreightTable from './FreightTable/index.vue'
import SellingTable from './SellingTable/index.vue'
import Selling from './Selling/index.vue'
import { useEnumSelect } from "@/hooks";
const { options: optionsData } = useEnumSelect({
  params: ["channel_delivery_mode",'transport_type',"freight_calc_mode"],
});
const activeName = ref('freight')

const tableData = reactive({
  freight: [],
  selling: [],
})

const handleClick = (tab, event) => {}

const handleTableData = e => {
  tableData[activeName.value] = e
}
</script>
<style setup></style>
<style lang="scss" scoped>
.trial-calc {
  :deep(.el-tab-pane) {
    height: 100%;
  }
  :deep(.el-tabs__content) {
    height: 100%;
    padding-bottom: 40px;
  }
      :deep(.el-tabs__nav-wrap::after) {
      height: 1px;
    }
}
</style>
